// import React, { useState, useEffect } from "react";

// const App = () => {
//   const [count, setCount] = useState(1);

//   useEffect(() => {
//     setTimeout(() => {
//       console.log(count);
//     }, 2000);
//   }, [count]);

//   return (
//     <>
//       <h2>Capture Value</h2>
//       <div>count: {count}</div>
//       <button onClick={() => setCount((v) => v - 1)}>-</button>
//       <button onClick={() => setCount((v) => v + 1)}>+</button>
//     </>
//   );
// };

import React, { useRef, useEffect } from "react";

const App = () => {
  // useRef是可以创建变量的，但是没有响应式
  // 需要一个变量，但是又不需要显示在页面上的时候，可以使用useRef
  const count = useRef(1);

  useEffect(() => {
    console.log(count);
  }, []);

  const fn = () => {
    count.current = count.current + 1;
    setTimeout(() => {
      console.log(count.current);
    }, 2000);
  };

  return (
    <>
      <h2>Capture Value</h2>
      <div>count: {count.current}</div>
      <button onClick={fn}>+</button>
    </>
  );
};

export default App;
